<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单个插槽 默认插槽</title>
    <!-- 引入vue.js -->
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 挂载点 id="app" -->
    <div id="app">
        <custom-card>
            <template v-slot:header>
                <p>父级自定义标题1</p>
            </template>
            <template v-slot:default>
                <p>父级自定义内容2</p>
            </template>
        </custom-card>
    </div>
    <!-- 使用javascript 脚本 -->
    <script type="text/javascript">
        // 定义子组件
        const CustomCard = {
            template: `
        <div class="card">
            <header>
                <slot name="header">默认标题</slot>
            </header>
            <main>
                <slot>默认内容</slot>
            </main>
        </div>
    `
        };
        // 创建Vue实例，并挂载到#app
        var app = new Vue({
            el: '#app',
            components: {
                'custom-card': CustomCard
            }
        })
    </script>
</body>

</html>